<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hell react</title>
  <style>
    .title {
      background-color: orange;
      width: 200px;
    }
  </style>
</head>
<body>
  <div id="test"></div>
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    /*
      区分：【js语句】和【js表达式】
      1.表达式：表达式是由运算符构成，并运算产生结果的语法结构。每个表达式都会产生一个值,它可以放在任何需要一个值的地方
        示例：
          (1) a+b
          (2) demo(1)
          (3) arr.map()
          (4) function fun() {}
      2.语句：语句则是由分号分隔的句子或命令,是一个行为
        示例：
          (1) 声明语句 const a
          (2) 赋值语句 const b = 2
          (1) 表达式语句：a+b;
          (2) 控制语句 if(a>b) {}

    */
    const data = ['Vue', 'React', 'Angular']
    // 1.创建虚拟DOM
    const VDOM = (
      <div>
        <h1>前端js框架列表</h1>
        <ul>
          {
            data.map((item, index)=>{
              return <li key={index}>{item}</li>
            })
          }
        </ul>
      </div>  
      )
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>
</body>
</html>